<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import ChatWindow from "./components/ChatWindow.vue";
import Login from "./components/Login.vue";
import { isAuthenticated, getUser, logout } from "./services/auth";
import { useChatStore } from "./stores/chat";
import { useQuasar } from 'quasar';
import { isTauri } from './services/secure-storage';
import { setupApiInterceptor, removeApiInterceptor } from './services/api-interceptor';
import { autoCheckForUpdates } from './services/updater';

const isLoggedIn = ref(false);
const chatStore = useChatStore();
const $q = useQuasar();

onMounted(() => {
  // 设置 API 拦截器（处理 401 错误）
  setupApiInterceptor();
  
  // 监听 token 过期事件
  window.addEventListener('token-expired', handleTokenExpired);
  
  // 监听应用关闭事件（Tauri环境）
  if (isTauri()) {
    window.addEventListener('beforeunload', handleBeforeUnload);
    // 自动检查更新（延迟执行，避免影响启动速度）
    autoCheckForUpdates();
  }
  
  if (isAuthenticated()) {
    const user = getUser();
    if (user) {
      isLoggedIn.value = true;
      // 设置当前用户的 open_id（前端统一使用 open_id 作为唯一标识）
      const openId = user.open_id || 
                     (user.snowflake_id ? String(user.snowflake_id) : null) || 
                     user.id.toString();
      chatStore.currentUserId = openId;
      // 使用订阅 ID 连接 WebSocket
      // 注意：这里使用 localStorage 作为缓存，在 Tauri 环境中会在登录时同步更新
      const subscriptionId = localStorage.getItem('subscriptionId');
      if (subscriptionId) {
        chatStore.connect(subscriptionId);
      } else {
        console.warn('未找到订阅 ID，请重新登录');
      }
    }
  }
});

onBeforeUnmount(async () => {
  // 应用卸载时清理资源
  console.log('应用卸载，开始清理资源...');
  
  // 移除 API 拦截器
  removeApiInterceptor();
  
  // 移除事件监听器
  window.removeEventListener('token-expired', handleTokenExpired);
  if (isTauri()) {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  }
  
  // 断开WebSocket连接（这会触发MQTT取消订阅）
  try {
    await chatStore.disconnect();
    console.log('WebSocket已断开，MQTT订阅已取消');
  } catch (error) {
    console.error('断开WebSocket失败:', error);
  }
});

const handleBeforeUnload = async (event: BeforeUnloadEvent) => {
  // Tauri应用关闭时的清理
  console.log('应用即将关闭，清理资源...');
  
  // 同步断开WebSocket（注意：beforeunload中不能使用async/await）
  // 但我们可以尝试同步清理
  try {
    // 使用同步方式断开（如果可能）
    chatStore.disconnect().catch(err => {
      console.error('断开连接失败:', err);
    });
  } catch (error) {
    console.error('清理失败:', error);
  }
};


const handleLoginSuccess = (user: any) => {
  isLoggedIn.value = true;
};

const handleLogout = async () => {
  await logout();
  chatStore.disconnect();
  isLoggedIn.value = false;
};

// 处理 token 过期事件
const handleTokenExpired = async () => {
  console.log('收到 token 过期事件，跳转到登录页');
  // 断开 WebSocket 连接
  try {
    await chatStore.disconnect();
  } catch (error) {
    console.error('断开 WebSocket 失败:', error);
  }
  // 更新登录状态
  isLoggedIn.value = false;
};
</script>

<template>
  <div id="app">
    <ChatWindow v-if="isLoggedIn" @logout="handleLogout" />
    <Login v-else @login-success="handleLoginSuccess" />
  </div>
</template>

<style>
/* iOS 风格全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #EDEDED;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #EDEDED;
  color: #000000;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 400;
}

/* 滚动条样式 - iOS 风格 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 选择文本样式 */
::selection {
  background: rgba(124, 58, 237, 0.25);
  color: #000000;
}

/* 按钮和链接样式 */
button, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
</style>
